<!-- ******** 微前端时解开注释 start ******** -->
<!-- <template>
  <div>
  具体配置根据你自己的子应用来调整
    <micro-app name="/dataScreen/" url="http://localhost:3001/dataScreen/" baseroute="/dataScreen" inline disableSandbox></micro-app>
  </div>
</template> -->
<!-- ******** 微前端时解开注释 end ******** -->

<!-- 非微前端部分 start -->
<script setup lang="ts">
import useScreenAdapte from '@/hooks/useScreenAdapte';
import { getChartData } from './chartData';

const { flyChartConfig, liquidFillConfig, scrollRank, scrollTable, capsule, conical } = getChartData();
const { wrapBox, calcRate, onWindowResize, unWindowResize } = useScreenAdapte();
const countTo1 = ref();
const countTo2 = ref();
const countTo3 = ref();

const reStartCount = () => {
  if (countTo1.value) countTo1.value.restart();
  if (countTo2.value) countTo2.value.restart();
  if (countTo3.value) countTo3.value.restart();
};

function fullScreen() {
  document.documentElement.requestFullscreen();
}

onMounted(() => {
  calcRate();
  onWindowResize();
});

const intervalTimer = ref<NodeJS.Timer>();
nextTick(() => {
  intervalTimer.value = setInterval(() => {
    reStartCount();
  }, 5000);
});

onBeforeUnmount(() => {
  unWindowResize();
  clearInterval(intervalTimer.value);
});
</script>

<template>
  <div class="wrapBox text-gray-300 w-[1920px] h-[1080px] origin-top-left fixed inset-0 box-border" ref="wrapBox">
    <el-row :gutter="20">
      <!-- 第一列 -->
      <el-col :span="6">
        <div class="flex flex-col" style="height: calc(1080px - 30px)">
          <div class="h-1/3 bottom20">
            <bv-border-box name="border10">
              <div class="padding20">
                <bv-progress-bar :config="{ value: [58] }" style="width: 200px; height: 100px; margin: 40px auto"></bv-progress-bar>
                <div class="w-full flex justify-between text-center">
                  <div style="font-size: 18px; color: 'rgba(255,255,255,.65)'; width: 120px">
                    <bv-count-to :startVal="15" :endVal="5312" :duration="2000" ref="countTo1"></bv-count-to>
                    <div>设备总数</div>
                  </div>
                  <div style="font-size: 18px; color: #1089ff; width: 120px">
                    <bv-count-to :startVal="201" :endVal="8558" :duration="2000" ref="countTo2"></bv-count-to>
                    <div>数据条数</div>
                  </div>
                  <div style="font-size: 18px; color: 'rgba(255,255,255,.65)'; width: 120px">
                    <bv-count-to :startVal="30" :endVal="1513" :duration="2000" ref="countTo3"></bv-count-to>
                    <div>员工总数</div>
                  </div>
                </div>
              </div>
            </bv-border-box>
          </div>
          <div class="h-1/3 bottom20">
            <bv-border-box name="border10" class="h-full">
              <div class="flex h-full padding20">
                <bv-capsule-chart :config="capsule" style="width: 100%; height: 100%"></bv-capsule-chart>
              </div>
            </bv-border-box>
          </div>
          <div class="h-1/3">
            <bv-border-box name="border10">
              <div class="padding20">
                <bv-liquid-fill
                  :config="liquidFillConfig"
                  style="width: 150px; height: 150px; stroke: #fff; fill: #fff; margin: 0 auto"
                ></bv-liquid-fill>
                <div class="flex justify-between">
                  <bv-liquid-fill :config="{ data: [60] }" style="width: 150px; height: 150px"></bv-liquid-fill>
                  <bv-liquid-fill :config="{ data: [30] }" style="width: 150px; height: 150px"></bv-liquid-fill>
                </div>
              </div>
            </bv-border-box>
          </div>
        </div>
      </el-col>
      <!-- 第二列 -->
      <el-col :span="12" class="relative">
        <div class="text-3xl text-gray-200 font-bold absolute top-1 left-2/4 -translate-x-2/4">
          数据可视化大屏展示
          <div class="text-sm text-red-600 text-center cursor-pointer" @click="fullScreen">点我进入全屏</div>
        </div>
        <div class="text-xs absolute top-1 left-5">
          <div>有点丑-.-</div>
          <div>没有多花时间在ui界面上</div>
          <div>主要考虑了屏幕适配</div>
        </div>

        <div class="flex flex-col" style="height: calc(1080px - 30px)">
          <div class="h-2/3 flyline-chart-wrap bottom20">
            <bv-flyline-chart :config="flyChartConfig" class="w-full h-full"></bv-flyline-chart>
          </div>
          <div class="h-1/3">
            <bv-border-box name="border8">
              <div class="h-full flex">
                <bv-scroll-rank :config="scrollRank" class="h-full px-5"></bv-scroll-rank>
              </div>
            </bv-border-box>
          </div>
        </div>
      </el-col>
      <!-- 第三列 -->
      <el-col :span="6">
        <div class="flex flex-col" style="height: calc(1080px - 30px)">
          <div class="h-1/3 bottom20">
            <bv-border-box name="border10">
              <bv-scroll-table :config="scrollTable" class="w-1/2 !h-5/6 padding20"></bv-scroll-table>
            </bv-border-box>
          </div>
          <div class="h-1/3 bottom20">
            <bv-border-box name="border10">
              <bv-conical-chart :config="conical" class="!w-11/12 !h-4/5 padding20 m-0"></bv-conical-chart>
            </bv-border-box>
          </div>
          <div class="h-1/3">
            <bv-border-box name="border10" class="h-full">
              <div class="h-full flex flex-wrap justify-between padding12">
                <bv-liquid-fill
                  v-for="(item, index) in 6"
                  :key="index"
                  :config="{ data: [(index + 2) * 10], shape: 'roundRect' }"
                  class="h-1/2"
                  style="width: 30%; padding-bottom: 10px"
                  :style="{ margin: index === 1 || index === 4 ? '0 10px' : '0' }"
                ></bv-liquid-fill>
              </div>
            </bv-border-box>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.wrapBox {
  padding: 15px;
  background: url('/src/assets/bg2.png') center center no-repeat;
  background-size: 100% 100%;

  .bottom20 {
    margin-bottom: 15px;
  }

  @for $i from 1 through 30 {
    .padding#{$i} {
      padding: #{$i}px;
      box-sizing: border-box;
    }
  }
}
</style>
<!-- 非微前端部分 end -->
